import  {  useContext } from 'react'
import { Table, Space, Popconfirm, Button } from 'antd'
import axios from 'axios'
import CounterContext1 from './ExampleList1.context.js'


//列表
const ListTable = () => {
	const {setIsModalVisible, listdata, searchList, setActiveItemData} = useContext(CounterContext1);
	// 编辑
	const showModal = (record) => {
		console.log(JSON.parse(JSON.stringify(record)));
		setActiveItemData(JSON.parse(JSON.stringify(record)));
		setIsModalVisible(true);
	};
	// 删除
	const delItem = async (record) => {
		await axios.get('/moddata/user/delUserItem.json', {
			params: {
				primaryId: record.primaryId,
			}
		});
		searchList();
	};

	const columns = [
		{
			title: '用户编号',
			dataIndex: 'userId',
			key: 'userId',
		},
		{
			title: '用户名',
			dataIndex: 'userName',
			key: 'userName',
		},
		{
			title: '昵称',
			dataIndex: 'nickName',
			key: 'nickName',
		},
		{
			title: '性别',
			dataIndex: 'sex',
			key: 'sex',
			render: (text, record) => (
				record.sex === '1' ? '男':'女'
			),
		},
		{
			title: '操作',
			key: 'action',
			render: (text, record) => (
				<Space size="middle">
					<Button type="link" onClick={() => showModal(record)}>编辑</Button>
					<Popconfirm title="是否确认删除?" onConfirm={() => delItem(record)}><Button type="link">删除</Button></Popconfirm>
				</Space>
			),
		},
	];

	return (<Table columns={columns} dataSource={listdata} rowKey={record=>record.userId} className="mt20" />);
};

export default ListTable;